// Typography.styl
// Headings, body text, lists, code, and more for a versatile and durable typography system
// ----------------------------------------------------------------------------------------


// BODY TEXT
// ---------

p
  margin: 0 0 ($baseLineHeight/2)
  font-family: $baseFontFamily
  font-size: $baseFontSize
  line-height: $baseLineHeight
  small
    font-size: $baseFontSize - 2
    color: $unimportantColor


.lead
  margin-bottom: $baseLineHeight
  font-size: 20px
  font-weight: 200
  line-height: $baseLineHeight * 1.5


// HEADINGS
// --------

h1, h2, h3, h4, h5, h6
  margin: 0
  font-weight: bold
  color: $headingColor
  text-rendering: optimizelegibility // Fix the character spacing for headings
  small
    font-weight: normal
    color: $unimportantColor


h1
  font-size: 30px
  line-height: $baseLineHeight * 2
  small
    font-size: 18px


h2
  font-size: 24px
  line-height: $baseLineHeight * 2
  small
    font-size: 18px


h3
  line-height: $baseLineHeight * 1.5
  font-size: 18px
  small
    font-size: 14px


h4, h5, h6
  line-height: $baseLineHeight

h4
  font-size: 14px
  small
    font-size: 12px


h5
  font-size: 12px

h6
  font-size: 11px
  color: $unimportantColor
  text-transform: uppercase


// Page header
.page-header
  padding-bottom: $baseLineHeight - 1
  margin: $baseLineHeight 0
  border-bottom: 1px solid $grayLighter

.page-header h1
  line-height: 1




// LISTS
// -----

// Unordered and Ordered lists
ul, ol
  padding: 0
  margin: 0 0 ($baseLineHeight/2) 25px

ul ul,
ul ol,
ol ol,
ol ul
  margin-bottom: 0

ul
  list-style: disc

ol
  list-style: decimal

li
  line-height: $baseLineHeight

ul.unstyled,
ol.unstyled
  margin-left: 0
  list-style: none


// Description Lists
dl
  margin-bottom: $baseLineHeight

dt,
dd
  line-height: $baseLineHeight

dt
  font-weight: bold

dd
  margin-left: ($baseLineHeight/2)


// MISC
// ----

// Horizontal rules
hr
  margin: $baseLineHeight 0
  border: 0
  border-top: 1px solid $hrBorder
  border-bottom: 1px solid $white


// Emphasis
strong
  font-weight: bold

em
  font-style: italic

.muted
  color: $grayLight


// Abbreviations and acronyms
abbr
  font-size: 90%
  text-transform: uppercase
  border-bottom: 1px dotted #ddd
  cursor: help


// Blockquotes
blockquote
  padding: 0 0 0 15px
  margin: 0 0 $baseLineHeight
  border-left: 5px solid $grayLighter
  p
    margin-bottom: 0
    $font-shorthand(16px,300,$baseLineHeight * 1.25)

  small
    display: block
    line-height: $baseLineHeight
    color: $grayLight
    &:before
      content: '\2014 \00A0'



  // Float right with text-align: right
  &.pull-right
    float: right
    padding-left: 0
    padding-right: 15px
    border-left: 0
    border-right: 5px solid $grayLighter
    p,
    small
      text-align: right




// Quotes
q:before,
q:after,
blockquote:before,
blockquote:after
  content: ""


// Addresses
address
  display: block
  margin-bottom: $baseLineHeight
  line-height: $baseLineHeight
  font-style: normal


// Misc
small
  font-size: 100%

cite
  font-style: normal


